<template>
  <div class="ek-switch">
    <el-switch
      v-model="value"
      inline-prompt
      :active-text="activeText"
      :active-value="activeValue"
      :inactive-text="inactiveText"
      :inactive-value="inactiveValue"
      :disabled="disabled"
      @change="change"
      :size="size"
    />
  </div>
</template>

<script setup>
import {
  defineComponent,
  defineEmits,
  getCurrentInstance,
  computed,

} from "vue";

const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 启用文字
  activeText: {
    type: String,
    default: '是',
  },
  activeValue: {
    type: [String, Number, Boolean],
    default: 1,
  },
  // 禁用文字
  inactiveText: {
    type: String,
    default: '否',
  },
  inactiveValue: {
    type: [String, Number, Boolean],
    default: 0,
  },
  size: {
    type: String,
    default: 'default'
  }

});

const {
  appContext: {
    config: { globalProperties },
  }
} = getCurrentInstance();

const emit = defineEmits(["update:modelValue",'change'])


const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

// 改变事件
function change(event) {
  emit("change", event);
};

</script>

<style scoped lang="scss"></style>
